<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>淘宝/天猫</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style>
      .aui-tab-item{font-size: .7rem;height: 1.8rem;line-height: 1.8rem;}
        .aui-tab-item.aui-active{border-color: #ff6b06;color: #FE417A;}
        .sort-tab .aui-tab-item.aui-active{border:none;}
        .aui-searchbar-input{border-radius: 5rem;background: #F3F3F3}
        #search_bar{width: 100%;z-index: 9999;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
        .aui-switch:checked{background-color: #FF512F;border-color: #FF512F;}
        .sortimg{display: inline-block;vertical-align: middle;width: 8px;}
        .tjp-icon{display: inline-block;vertical-align:text-bottom;margin-right: .5rem;margin-top: 0.2rem;}
        .tjp-icon img{width: 1rem;height: 1rem;vertical-align: middle;}
        .aui-tab-item{color: #333333;}
    </style>
</head>
<body class="bg-white">
    <div id="header">
        <header class="aui-bar aui-bar-nav bg-white" id="aui-header">
            <a class="aui-pull-left aui-btn"  onclick="closeWin();">
                <span class="aui-iconfont aui-icon-left aui-text-default" style="color:#333333;"></span>
            </a>
            <div class="aui-title" style="left:1.5rem; right: 2rem;">
                <div class="aui-searchbar bg-none" id="search">
                    <div class="aui-searchbar-input aui-border-radius">
                        <span class="tjp-icon"><img src="../image/taobao.png"></span>
                        <input type="search" placeholder="请输入搜索内容" id="search-input" >
                        <div class="aui-searchbar-clear-btn"id="clearbtn">
                            <i class="aui-iconfont aui-icon-close" style="font-size: .6rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
            <a class="aui-pull-right aui-btn aui-font-size-14 aui-text-default" onclick="getData()" style="padding:0 0.3rem;">
              <span style="height: 1.2rem;line-height: 1.2rem;background: #FE417A;color:white;width:2rem;border-radius:1.2rem;">搜索</span>
            </a>
        </header>
        <section class="aui-content bg-white" id="search_bar">
            <div class="aui-tab sort-tab" id="tab">
                <div class="aui-tab-item aui-active" data-sort="default" tapmode >综合</div>
                <div class="aui-tab-item sort" data-sort="sales" data-desc="none" tapmode>销量  <img src="../image/sort-default.jpg" class="sortimg" tapmode ></div>
                <div class="aui-tab-item sort" data-sort="quan_price" data-desc="none" tapmode>券额 <img src="../image/sort-default.jpg" class="sortimg" tapmode ></div>
                <div class="aui-tab-item sort" data-sort="rate" data-desc="none" tapmode>佣金 <img src="../image/sort-default.jpg" class="sortimg" tapmode ></div>
            </div>
        </section>
    </div>


</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-tab.js" ></script>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/doT.min.js" ></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript">
  var is_tmall=0;
    apiready = function(){
      api.parseTapmode();
        var header = $api.byId('header');
        var headerH =  $api.fixStatusBar(header);
        is_tmall = api.pageParam.is_tmall||'0';
        api.openFrame({
            name: 'taobao_frm',
            url: './taobao_frm.html',
            rect: {
                x: 0,
                y: headerH,
                w: 'auto',
                h: 'auto'
            },
            pageParam: {
                is_tmall:is_tmall
            },
            bounces: true,
            bgColor: 'rgba(0,0,0,0)',
            vScrollBarEnabled: false,
            hScrollBarEnabled: false
        });
        //tab切换
        var taobao_imgs = {"0":"../image/taobao.png","1":"../image/tmall.png"}
        $('.tjp-icon img').attr('src',taobao_imgs[is_tmall]);
        var tab = new auiTab({
          element:document.getElementById("tab"),
          index:1,
          repeatClick:true
        },function(ret){
            $('.sort').not('.aui-active').attr('data-desc','none');
            $('.sort').not('.aui-active').find('img').attr('src','../image/sort-default.jpg');
            if (ret.index>1) {
                var desc = $(ret.dom).data('desc');
                if (desc=='none' || desc=='down') {
                    $(ret.dom).attr('data-desc','up');
                    $(ret.dom).find('img').attr('src','../image/sort-up.jpg');
                }else {
                    $(ret.dom).attr('data-desc','down');
                    $(ret.dom).find('img').attr('src','../image/sort-down.png');
                }
            }
            getData();
      });
    };

    function getData(){
        var q = $('#search-input').val();
        var sort = $('#tab .aui-active').data('sort');
        var desc = $('#tab .aui-active').data('desc')||'';
        var data = JSON.stringify({sort:sort,is_tmall:is_tmall,q:q,desc:desc})
        console.log(data)
        //alert(data);
        api.execScript({
            name: 'taobao_win',
            frameName: 'taobao_frm',
            script: 'getData(' +data+ ',true);'
        });
    }

</script>




</html>
